<template>
  <div class="ShareRecords">
    <!--<div class="header">-->
      <!--<van-nav-bar-->
        <!--title="分享记录"-->
        <!--left-text="返回"-->
        <!--right-text-->
        <!--left-arrow-->
        <!--@click-left="onClickLeft"-->
        <!--fixed-->
      <!--/>-->
    <!--</div>-->
    <div class="nav">
      <div class="left">全部</div>
      <div class="right">
        <div class="beginTime" @click="showTimePicker('开始时间')">{{beginTime}}</div>
        <div class="centerText">至</div>
        <div class="endTime" @click="showTimePicker('结束时间')">{{endTime}}</div>
      </div>
    </div>
    <div class="list">
      
      <ul  v-if="initData&&initData.length>0">
        <li v-for="(item,index) in initData" :key="index">
          <div class="main">
            <div class="pic"><img :src="item.avatar" alt=""></div>
            <div class="text">
              <div class="name">{{item.nick_name}}</div>
              <div class="uid">
                <div>ID:{{item.user_id}}</div>
                <div>{{item.created_at}}</div>
              </div>
            </div>
          </div>
          <div class="carFooter">
            贡献额 <span>￥{{item.total}}</span>
          </div>
        </li>
      </ul>
      <div class="empty" v-else>暂无数据</div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
  v-model="currentDate"
  type="date"
  @confirm="confirm"
  @cancel="cancel"
/>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "ShareRecords",
  data() {
    return {
      beginTime:'',
      endTime:'',
      show:false,
      currentDate:new Date(),
      name:"",
      initData:[],
    };
  },
  created:function () {
    setTitle('分享记录')
  },
  mounted() {
    this.getDate('yyyy-MM-dd');
    this.getInitData();
  },
  methods: {
    //返回
    onClickLeft() {
      this.$router.back();
    },
    //获取当前时间
    getDate(fmt){
       let newDate = new Date()
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (newDate.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            var o = {
                'M+': newDate.getMonth() + 1,
                'd+': newDate.getDate(),
                'h+': newDate.getHours(),
                'm+': newDate.getMinutes(),
                's+': newDate.getSeconds(),
                'E+': newDate.getDay()
            };
            for (var k in o) {
                if (new RegExp(`(${k})`).test(fmt)) {
                    var str = o[k] + '';
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
                }
            }
            this.beginTime=fmt;
            this.endTime=fmt;
    },
    showTimePicker(name){
      this.show=true;
      this.name=name;
    },
    confirm(){
      if(this.name=="开始时间"){
          this.beginTime=this.$vuefilter.formatDate(this.currentDate,'yyyy-MM-dd');
      }else{
         this.endTime=this.$vuefilter.formatDate(this.currentDate,'yyyy-MM-dd');
      };
      this.show=false;
    },
    cancel(){
      this.show=false;
    },
    async getInitData(){
      let params={
        user_id:JSON.parse(localStorage.getItem("userInfo")).userId
      }
      const res=await this.$axios.post(this.$api.queryUserTeamInfo,params);
      if(res.success){
        this.initData=res.data;
      };
    }
  }
};
</script>

<style scoped>
.ShareRecords{
  /*padding-top:.46rem;*/
}
.nav {
  width:100%;
  height:.4rem;
  background:#fff;
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding:0 .2rem;
}
.nav .right {
  display:flex;
  align-items: center;
}
.beginTime, .endTime{
  height:.24rem;
  width:1rem;
  background:#eeeeee;
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius: .05rem;
}
.centerText{
  padding:0 .1rem;
}
.van-popup{
  width:100%;
}
.list {
  margin-top:.1rem;
  width:100%;
}
.list li {
  width:100%;
  background:#fff;
  padding:0 .2rem;
  margin-bottom:.1rem;
}
.list li .main {
  padding:.1rem 0;
  display:flex;
  align-items: center;
  border-bottom:1px solid #eeeeee;
}
.list li .main .pic img {
  width:.4rem;
  height:.4rem;
  border-radius: 50%;
}
.list li .main .text {
  padding-left:.1rem;
  width:calc(100% - .4rem);
}
.list li .main .text>div{
  padding:.03rem;
}
.list li .main .text .uid{
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.list li .carFooter {
  height:.4rem;
  width:100%;
  display:flex;
  justify-content: flex-end;
  align-items: center;
}
.list li .carFooter span {
  color:#F1635B;
}
.empty{
  padding:.2rem;
  width:100%;
  text-align: center;
  color:#999999; 
}
</style>
